<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link href="css/style.css" rel='stylesheet' type='text/css' />

</head>
<body>
    <div id="app">
        <input id="us" v-model='username'>
        <input id="uus" v-model='pname'>
    <input type="button" value="test2" v-on:click="test2">
    <ul id="nav"> <!--表头路由-->
        <li><a ><router-link to="/mainp">公司主页</router-link></a></li> 
        <li><a >企业文化</a></li> 
        <li><a >部门介绍</a></li> 
        <li><a >办公服务</a></li> 
        <li><a ><router-link to="/apply">申请</router-link></a></li> 
        <li><a ><router-link to="/information">个人信息</router-link></a></li> 
    
    
    
    </ul> 
    
    <router-view v-bind:msg="msg"></router-view><!--我手撕-->
    </div>
    <template id="mainp">
            <div id="list">
                <table>
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>日期</th>
                            <th>原因</th>
                        </tr>
                        <tbody>
                            <tr v-for="one in playlist">
                                <td v-text="one.name"></td>
                                <td v-text="one.date"></td>
                                <td v-text="one.reason"></td>
                            </tr>
                        </tbody>
                    </thead>
                </table>
            </div>
    </template>
    <template id="apply">
        <div>
            <!--<a href="http://localhost:8080/WebDemo/frontend/apply/#/">
                <input type="button" @click="toApply" value="点击进入申请页面"/>
            </a>-->
            <input type="button" onclick="toApply()" value="点击进入申请页面"/>
            <!--<a href="http://localhost:8080/WebDemo/frontend/main/list.html">
                <input type="button" @click="toList" value="点击查看申请列表"/>
            </a>-->
            <input type="button" onclick="toList()" value="点击查看申请列表"/>
        </div>
    </template>
    <template id="information">
            <div>
                <a>{{ $route.query.username }}</a>
                <input type="button" value="点击签到" onclick="sign()">
                <a href="http://localhost:8080/WebDemo/frontend/login/lo_gin.html"><input type="button" value="注销"></a>
            </div>           
    </template>
    <script>
    var mainp = {template:'#mainp'}
    var apply = {template:'#apply'}
    var information = {template:'#information'}
    const routes = [
    {path: '/' ,component:information},
    {path: '/apply',component:apply},
    {path: '/mainp',component:mainp},
    {path: '/information',component:information}
    ]    
    const router = new VueRouter({
        routes
    })
    const app = new Vue({
        el:'#app',
        data:{
            username:'',
            password:'',
            pid:0,
            pidentity:'',
            pname:'',
            msg:'1111'
        },
        router,
        components:{
            mainp,
            apply,
            information:{
                template:information,
                props:['msg'],
                data(){
                    return {
                        msg:'1230132'
                    }                
                },
            }
        },
        methods:{
        	signIn(){
        		alter("子组件调用了");
        	},
            test2(){
                var user  = this.username
                this.$router.push({
                    path:'/information',
                    query:{
                            username:user
                    }
                })
                alert(user)
            },
        },
        created(){//这个是那个啥 记住用户名
        	var jsondata = sessionStorage.getItem("json");
            var user = JSON.parse(jsondata);
            this.username = user.username;
            this.password = user.password;
            this.pid = user.pid;
            this.pidentity = user.pidentity;
            this.pname = user.pname;
        },
    })
    </script>
    <script type=”text/javascript”>
            var urlinfo=window.location.href;
            var len=urlinfo.length;
            var offset=urlinfo.indexOf("?");
            var newsidinfo=urlinfo.substr(offset,len)
            var newsids=newsidinfo.split("=");
            var newsid=newsids[1];
            var newsname=newsids[0];
            alert(newsid);
    </script>
    <script>
        function toApply()
        {
            window.location.href = "http://localhost:8080/WebDemo/frontend/apply/#";
            
        }
        function toList()
        {       
            window.location.href = "http://localhost:8080/WebDemo/frontend/main/list.html#";
        }
    </script>
</body>
</html>